// ImageUploader 组件使用示例

// 基本使用
import React from 'react';
import { ImageUploader } from './dist/my-react-component.js';

function BasicExample() {
  const handleUploadSuccess = (fileList) => {
    console.log('上传成功:', fileList);
  };

  return (
    <ImageUploader 
      buttonText="上传图片" 
      modalTitle="图片上传"
      onUploadSuccess={handleUploadSuccess}
    />
  );
}

// 自定义样式和行为
import { ImageUploader as CustomImageUploader } from './dist/my-react-component.js';

function CustomExample() {
  const handleUploadSuccess = (fileList) => {
    console.log('上传成功:', fileList);
    // 在这里可以处理上传后的逻辑，比如更新图片列表
  };

  const handleUploadError = (error) => {
    console.error('上传失败:', error);
  };

  return (
    <CustomImageUploader 
      buttonText="选择并上传图片"
      modalTitle="上传图片到服务器"
      onUploadSuccess={handleUploadSuccess}
      onUploadError={handleUploadError}
      type="primary"
      style={{ marginTop: '20px' }}
    />
  );
}

// 完整示例
import ReactDOM from 'react-dom/client';
import { Button, Card, ImageUploader } from './dist/my-react-component.js';
import './dist/my-react-component.css';

function App() {
  const handleUploadSuccess = (fileList) => {
    console.log('图片上传成功:', fileList);
    // 实际项目中，这里可能需要调用API将图片保存到服务器
  };

  return (
    <div style={{ padding: '20px' }}>
      <h1>My React Component Library 示例</h1>
      
      <Card title="基本按钮" style={{ marginBottom: '20px' }}>
        <Button type="primary">主要按钮</Button>
        <Button style={{ marginLeft: '10px' }}>默认按钮</Button>
      </Card>

      <Card title="图片上传组件" style={{ marginBottom: '20px' }}>
        <p>点击下面的按钮来上传图片:</p>
        <ImageUploader 
          onUploadSuccess={handleUploadSuccess}
        />
      </Card>

      <Card title="自定义图片上传组件">
        <p>自定义样式的图片上传组件:</p>
        <ImageUploader 
          buttonText="上传用户头像"
          modalTitle="上传头像"
          type="primary"
          onUploadSuccess={handleUploadSuccess}
        />
      </Card>
    </div>
  );
}

export default App;